<template>
  <el-dialog
    title="考试选择"
    :close-on-click-modal="false"
    append-to-body
    :visible.sync="visible"
    class="jsbos-dialog jsbos-dialog_center"
    lock-scroll
    width="1000px"
    height="800px"
    min-height="600px"
  >
    <div class="jsbos-common-layout">
      <div class="jsbos-common-layout-left">
        <el-tree
          :data="treeData"
          :props="treeProps"
          default-expand-all
          highlight-current
          ref="treeBox"
          :expand-on-click-node="false"
          @node-click="handleNodeClick"
          :default-checked-keys="['-1']"
          class="jsbos-common-el-tree"
          node-key="id"
        >
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <i :class="data.icon"></i>
            <span class="text">{{ node.label }}</span>
          </span>
        </el-tree>
      </div>

      <div class="jsbos-common-layout-center" style="background-color: #fff">
        <el-tabs v-model="tabActiveName" style="margin-left: 20px">
          <el-tab-pane label="考试选取" v-if="!tabOnlyUpload" name="select">
            <el-row class="jsbos-common-search-box" :gutter="16">
              <el-form @submit.native.prevent>
                <el-col :span="8">
                  <el-form-item label="考试名称">
                    <el-input
                      v-model="query.name"
                      placeholder="请输入"
                      clearable
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="类型">
                    <el-select
                      v-model="query.type"
                      placeholder="请选择"
                      clearable
                    >
                      <el-option
                        v-for="(item, index) in typeOptions"
                        :key="index"
                        :label="item.fullName"
                        :value="item.id"
                        :disabled="item.disabled"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item>
                    <el-button
                      type="primary"
                      icon="el-icon-search"
                      @click="search()"
                      >查询</el-button
                    >
                    <el-button icon="el-icon-refresh-right" @click="reset()"
                      >重置</el-button
                    >
                  </el-form-item>
                </el-col>
              </el-form>
            </el-row>
            <div class="jsbos-common-layout-main jsbos-flex-main">
              <el-table
                v-loading="listLoading"
                :data="list"
                @sort-change="sortChange"
                @selection-change="handleSelectionChange"
                @row-click="selectRow"
                ref="selectSourceTable"
                border
              >
                <el-table-column
                  prop="selection"
                  type="selection"
                  width="50"
                  align="center"
                />
                <el-table-column
                  prop="fullName"
                  label="考试名称"
                  width="0"
                  align="left"
                >
                </el-table-column>
                <el-table-column
                  prop="creatorUserId"
                  label="创建用户"
                  width="120"
                  align="center"
                />
                <el-table-column
                  prop="creatorTime"
                  label="创建时间"
                  width="150"
                  align="center"
                />
              </el-table>
              <pagination
                :total="total"
                :page.sync="listQuery.currentPage"
                :limit.sync="listQuery.pageSize"
                @pagination="initData"
              />
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button
        type="primary"
        v-loading="saveLoading"
        @click="dataSelectSubmit()"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import request from "@/utils/request";
import { getPreviewFileTaskUrl } from "@/api/common";
import { getCategorySelector } from "@/views/exam/api/category";
export default {
  name: "SelectExam",
  components: {},
  props: {
    tabActiveName: {
      type: String,
      default: "select",
    },
    tabOnlyUpload: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      activeFile: {},
      previewVisible: false,
      fileList: [],
      showAll: false,
      visible: false,
      detailVisible: false,
      query: {
        name: undefined,
        catalogId: undefined,
        type: undefined,
        enabledMark: undefined,
      },
      treeProps: {
        children: "children",
        label: "fullName",
        value: "id",
      },
      list: [],
      listLoading: true,
      saveLoading: false,
      total: 0,
      listQuery: {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "",
      },
      catalogFormVisible: false,
      formVisible: false,
      exportBoxVisible: false,
      columnList: [
        { prop: "catalogId", label: "资源目录" },
        { prop: "name", label: "考试名称" },
        { prop: "type", label: "类型" },
        { prop: "size", label: "大小" },
        { prop: "creatorUserId", label: "创建用户" },
        { prop: "creatorTime", label: "创建时间" },
        { prop: "enabledMark", label: "状态" },
      ],
      treeData: [],
      treeActiveId: "-1",
      treeActiveName: "全部",
      catalogIdOptions: [],
      catalogIdProps: {
        label: "fullName",
        value: "id",
        children: "children",
      },
      typeOptions: [
        { fullName: "选项一", id: "1" },
        { fullName: "选项二", id: "2" },
      ],
      typeProps: {
        label: "fullName",
        value: "id",
      },
      multipleSelection: [],
      taskUrl: "",
    };
  },
  computed: {
    menuId() {
      return this.$route.meta.modelId || "";
    },
  },
  created() {
    this.initData();
    this.getTreeView();
    this.getcatalogIdOptions();
    this.handleTab();
  },
  methods: {
    previewSource(item) {
      this.activeFile = JSON.parse(item.fileJson);
      this.previewVisible = true;
    },
    // 表单提交
    dataSelectSubmit() {
      this.visible = false;
      this.$emit("selectComplete", this.multipleSelection);
    },
    getcatalogIdOptions() {
      this.$store
        .dispatch("base/getDictionaryData", {
          encode: "CertificateCategory",
        })
        .then((res) => {
          this.catalogIdOptions = res;
        });
    },
    goDetail(id) {
      this.detailVisible = true;
      this.$nextTick(() => {
        this.$refs.Detail.init(id);
      });
    },
    selectRow(row, column, event) {
      this.$refs.selectSourceTable.toggleRowSelection(row);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleTab() {
      if (!this.taskUrl) {
        getPreviewFileTaskUrl().then((res) => {
          if (res.data) {
            this.taskUrl = res.data;
          } else {
            this.$message.warning("文件不存在");
          }
        });
      }
    },
    sortChange({ column, prop, order }) {
      this.listQuery.sort = order == "ascending" ? "asc" : "desc";
      this.listQuery.sidx = !order ? "" : prop;
      this.initData();
    },
    getTreeView() {
      // 获取所属目录
      getCategorySelector({
        folderType: "exam",
        parentId: "-1",
        menuId: "111",
      }).then((res) => {
        let topItem = {
          fullName: "全部",
          hasChildren: true,
          id: "-1",
          children: res.data,
        };
        this.treeData = [topItem];
      });
    },
    getNodePath(node) {
      let fullPath = [];
      const loop = (node) => {
        if (node.level) fullPath.unshift(node.data);
        if (node.parent) loop(node.parent);
      };
      loop(node);
      return fullPath;
    },
    handleNodeClick(data, node) {
      this.treeActiveId = data.id;
      this.treeActiveName = data.name;
      for (let key in this.query) {
        this.query[key] = undefined;
      }
      this.query.catalogId = data.id;
      this.listQuery = {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "",
      };
      this.initData();
    },
    initData() {
      this.listLoading = true;
      this.visible = true;
      this.fileList = [];
      let _query = {
        ...this.listQuery,
        ...this.query,
        menuId: this.menuId,
      };
      request({
        url: `/api/exam/TemsExam/getList`,
        method: "post",
        data: _query,
      }).then((res) => {
        var _list = [];
        for (let i = 0; i < res.data.list.length; i++) {
          let _data = res.data.list[i];
          _list.push(_data);
        }
        this.list = _list;
        this.total = res.data.pagination.total;
        this.listLoading = false;
      });
    },
    search() {
      this.listQuery = {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "",
      };
      this.initData();
    },
    refresh(isrRefresh) {
      this.formVisible = false;
      if (isrRefresh) this.reset();
    },
    reset() {
      for (let key in this.query) {
        this.query[key] = undefined;
      }
      this.search();
    },
  },
};
</script>
<style lang="scss" scoped>
.jsbos-common-layout-left {
  height: auto;
}

.sourceMain .uploadBox[data-v-1aa79f2a] {
  min-height: 525px;
}

.sourceMain .uploadBox .uploadTopTi[data-v-1aa79f2a] {
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  line-height: 32px;
  margin: -3px 0 7px;
}

.sourceMain .uploadBox .uploadTopTi .ant-btn[data-v-1aa79f2a] {
  margin-right: -8px;
}

.sourceMain .uploadBox .uploadTopDec[data-v-1aa79f2a] {
  background: #fff5eb;
  font-size: 12px;
  padding: 6px 18px;
  width: 690px;
}

.sourceMain .uploadBox .uploadTopDec .anticon[data-v-1aa79f2a] {
  margin-right: 6px;
  font-size: 14px;
  vertical-align: -3px;
}

.sourceMain .uploadBox .uploadMenu[data-v-1aa79f2a] {
  margin: 14px 0;
  height: 112px;
  width: 710px;
}

.sourceMain .uploadBox .uploadMenu .item[data-v-1aa79f2a] {
  float: left;
  height: 112px;
  background: #f5f9fc;
  padding: 24px 24px 0;
  margin-left: 18px;
  width: 336px;
  cursor: pointer;
}

.sourceMain .uploadBox .uploadMenu .item .itemIcon[data-v-1aa79f2a] {
  display: inline-block;
  width: 48px;
  height: 59px;
  vertical-align: top;
}

.sourceMain .uploadBox .uploadMenu .item .itemIcon i[data-v-1aa79f2a] {
  width: 48px;
  height: 59px;
  display: inline-block;
}

.sourceMain
  .uploadBox
  .uploadMenu
  .item
  .itemIcon
  i.icon-file[data-v-1aa79f2a] {
  background: url();
}

.sourceMain
  .uploadBox
  .uploadMenu
  .item
  .itemIcon
  i.icon-html[data-v-1aa79f2a] {
  background: url();
}

.sourceMain
  .uploadBox
  .uploadMenu
  .item
  .itemIcon
  i.icon-scorm[data-v-1aa79f2a] {
  background: url();
}

.sourceMain .uploadBox .uploadMenu .item .itemCont[data-v-1aa79f2a] {
  display: inline-block;
  margin-left: 12px;
  font-size: 12px;
  color: #8c8c8c;
  width: 208px;
  vertical-align: top;
}

.sourceMain .uploadBox .uploadMenu .item .itemCont .h2[data-v-1aa79f2a] {
  font-size: 14px;
  color: #262626;
  margin-bottom: 3px;
}

.sourceMain .uploadBox .uploadMenu .item[data-v-1aa79f2a]:first-child {
  margin: 0;
}

.sourceMain .uploadBox .uploadList[data-v-1aa79f2a] {
  clear: both;
  padding-bottom: 10px;
}

.sourceMain .uploadBox .uploadList .item[data-v-1aa79f2a] {
  width: 100%;
  height: 46px;
  line-height: 46px;
  background: #f5f5f5;
  padding: 0 14px;
  margin-top: 10px;
  position: relative;
}

.sourceMain .uploadBox .uploadList .item.exist[data-v-1aa79f2a] {
  background-color: #fbe8e8;
}

.sourceMain .uploadBox .uploadList .item .icon-video[data-v-1aa79f2a] {
  background: url();
  width: 16px;
  height: 18px;
  display: inline-block;
  vertical-align: -4px;
  margin-right: 10px;
}

.sourceMain .uploadBox .uploadList .item .txt[data-v-1aa79f2a] {
  display: inline-block;
  max-width: 300px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: bottom;
}

.sourceMain .uploadBox .uploadList .item .num[data-v-1aa79f2a] {
  display: inline-block;
  color: #8c8c8c;
  margin: 0 8px;
}

.sourceMain .uploadBox .uploadList .item .jd[data-v-1aa79f2a] {
  width: 95px;
  display: inline-block;
}

.sourceMain .uploadBox .uploadList .item .state[data-v-1aa79f2a] {
  position: absolute;
  top: 0;
  right: 15px;
}

.sourceMain .uploadBox .uploadList .item .ant-input[data-v-1aa79f2a] {
  min-width: 330px;
}
</style>
